[#ftl]
[@define "agile.dijit.MenuItem" "agile._Component,agile.dijit._PopupSubMenuMixin"]
	category:"MenuItem Component"
	,widgetName:"MenuItem"		
	[#assign templateString][#compress]						
		<table class="agileComponent agileMenuItem">
			<tr>
				 <td style='width:10px;'><img class='{parameters.iconClass}' data-dojo-attach-point='iconClass'/></td>
				 <td align='left' style='width:120px'><div data-dojo-type='dijit/InlineEditBox' data-dojo-attach-point='label' >{parameters.label}</div></td>
				 <td align='right' style='width:80px'><div data-dojo-type='dijit/InlineEditBox' data-dojo-attach-point='accelKey'>{parameters.accelKey}</div></td>
				 <td style='width:10px;' align="right"><div data-dojo-attach-point="arrowWrapper" style='visibility:hidden;'>&nbsp;&nbsp;&gt;&gt;&nbsp;&nbsp;</div></td>
				 <td ><div data-dojo-attach-point="containerNode"></div></td>
			</tr>
		</table>		
	[/#compress][/#assign]				
	,templateString: "${templateString?js_string}"		
	,_items:{
		"Cancel":{label:"Cancel",iconClass:"Cancel",accelKey:"Ctrl + Z"}
		,"Copy":{label:"Copy",iconClass:"Copy",accelKey:"Ctrl + C"}
		,"Cut":{label:"Cut",iconClass:"Cut",accelKey:"Ctrl + X"}
		,"Delete":{label:"Delete",iconClass:"Delete",accelKey:"Ctrl + D"}
		,"Paste":{label:"Paste",iconClass:"Paste",accelKey:"Ctrl + P"}
		,"Redo":{label:"Redo",iconClass:"Redo",accelKey:"Ctrl + R"}
		,"Save":{label:"Save",iconClass:"Save",accelKey:"Ctrl + S"}
		,"Undo":{label:"Undo",iconClass:"Undo",accelKey:"Ctrl + U"}
	}
	,styleConstraints:agile.delegate(agile._Component.prototype.styleConstraints,{
		"left": {_ignore:true,_readOnly:true}
		,"top": {_readOnly:true	,ignore:function(widget,sourceType){ return sourceType !="agile";}}
	    ,"height":{_ignore:true,_readOnly:true}
	    //,"width":{_ignore:true,_readOnly:true}
	    ,"position":{_ignore:true,_readOnly:true}
	    ,"z-index":{_ignore:true,_hidden:true}
	})
	,attributes:agile.delegate(agile._Component.prototype.attributes,{
		iconClass:lang.mixin({},agile.ComboMetadata,{
			label:"i18n_icon_class"
			,initOptions:function(){
				var options = [];
				var items = agile.dijit.MenuItem.prototype._items;
				for(var name in items){
					//this.options[name] = items[name].iconClass;
					options.push({value:items[name].iconClass});
				}
				return options;
			}
			,onValueChange:function(/*widget*/widget,/*String*/name,/*Object*/value){
				//change the label and accelKey accordingly for pre-defined items
				var items = agile.dijit.MenuItem.prototype._items;
				var category = agile.dijit.MenuItem.prototype.category;
				for(var e in items){						
					if(value && value.indexOf(e) != -1){	
						widget.label.set("value",items[e].label);
						widget.accelKey.set("value",items[e].accelKey);
						break;
					}
				}
				value = this.parse(value);
				
				style.set(widget.iconClass,"visibility",value?"visible":"hidden");
				domClass.replace(widget.iconClass,value);
				widget.metadata(this.metadataCategory+"."+name,value);				
			}	
			,format:function(value){
				if(value){									
					value = value.replace('dijitEditorIcon dijitEditorIcon',"");
				}					
				return value;
			}
			,parse:function(value){
				if(value){
					value = "dijitEditorIcon dijitEditorIcon"+value;
				}
				return value;
			}
		})	
		
	    ,label:lang.mixin({},agile.ComboMetadata,{	
	    	label:"i18n_label"
			,initOptions:function(){
				var options = [];
				var items = agile.dijit.MenuItem.prototype._items;
				for(var name in items){
					options.push({value:items[name].label});
				}
				return options;
			}
//		    ,isRenderAsInnerHtml:function(widget,sourceType){
//				return sourceType !="agile" && widget.metadata("popup");
//			}
//		    ,toHtml:function(value,widget,sourceType){
//		    	if(widget.metadata("popup")){
//		    		return "<span>"+value+"</span>";
//		    	}			    	
//				return this.name + "=\""+value+"\" ";
//			}
			,onValueChange:function(/*widget*/widget,/*String*/name,/*Object*/value){					
//				widget.metadata(name,value);
				widget.metadata(this.metadataCategory+"."+name,value);
				widget.label.set("value",value);
				//change the icon and accelKey accordingly for pre-defined items
				var items = agile.dijit.MenuItem.prototype._items;
//				var category = agile.dijit.MenuItem.prototype.category;
				for(var e in items){						
					if(items[e].label == value){
						//agile.dijit.MenuItem.prototype.attributes.iconClass.onValueChange(widget,"iconClass",items[e].iconClass);
						//agile.dijit.MenuItem.prototype.attributes.iconClass.setValue(widget,"iconClass",items[e].iconClass);
						var iconClass = agile.dijit.MenuItem.prototype.attributes.iconClass.parse(items[e].iconClass);
						widget.metadata("parameters.iconClass",iconClass);
						domClass.replace(widget.iconClass,iconClass);
						[#--notify the property editor to refresh the value--]
						topic.publish("agile.widget.changed","dummy","iconClass",items[e].iconClass);
						//topic.publish("agile.widget.changed",["dummy","iconClass","true","disabled"]);
						//agile.dijit.MenuItem.prototype.attributes.accelKey.onValueChange(widget,"accelKey",items[e].accelKey);
						//widget.metadata("accelKey",items[e].accelKey);
						//topic.publish("agile.widget.changed",["dummy","accelKey",items[e].accelKey]);
						widget.accelKey.set("value",items[e].accelKey);
						break;
					}
				}
			}
		})
	
		,accelKey:lang.mixin({},agile.ComboMetadata,{
			label:"i18n_accel_key",
			initOptions:function(){
				var options = [];
				var items = agile.dijit.MenuItem.prototype._items;
				for(var name in items){
					options.push({value:items[name].accelKey});
				}	
				return options;
			}
			,onValueChange:function(/*widget*/widget,/*String*/name,/*Object*/value){				
		
				widget.metadata(this.metadataCategory+"."+name,value);
				widget.accelKey.reset1("value",value);
				
				//change the label and accelKey accordingly for pre-defined items
				var items = agile.dijit.MenuItem.prototype._items;
				var category = agile.dijit.MenuItem.prototype.category;
				for(var e in items){						
					if(items[e].accelKey == value){					
						widget.label.set("value",items[e].label);
						var iconClass = agile.dijit.MenuItem.prototype.attributes.iconClass.parse(items[e].iconClass);
						widget.metadata("parameters.iconClass",iconClass);
						domClass.replace(widget.iconClass,iconClass);
						[#--notify the property editor to refresh the value--]
						topic.publish("agile.widget.changed","dummy","iconClass",items[e].iconClass);
						break;
					}
				}
			}				
		})
		,disabled:lang.mixin({},agile.BooleanMetadata,{	
			label:"i18n_disabled",
			toHtml:function(value,widget,sourceType){
				return value?"disabled":"";	
			}
		})	
		,isSubMenu:lang.mixin({},agile.BooleanMetadata,{	
			_ignore:true
			,label:"i18n_sub_menu"
			,onValueChange:function(widget,name,value){				
//				widget.metadata(name,value);	
				widget.metadata("parameters."+name,value);
				if(value){
					style.set(widget.arrowWrapper,{visibility:"visible"});	
					widget.showSubMenu(true);
				}else{
					style.set(widget.arrowWrapper,{visibility:"hidden"});
					widget.showSubMenu(false);
				}
			}	
		})								
	})		
	,events:agile.delegate(agile._Component.prototype.events,{
			"onClick": {_ignore:false}
	})
	,initDefaultMetadata:function(){
		this.metadata("parameters.iconClass","dijitEditorIcon");
		this.metadata("parameters.label","");
		this.metadata("parameters.accelKey","");
		this.metadata("parameters.disabled",false);
	//		 //console.log(this.declaredClass,"agile.dijit.MenuItem:constructor() is called");
	//	on(this,"startup",this,"onMenuItemStartup");	
		this.metadata("dojoDeclaredClass",lang.replace("dijit/{widgetName}",{widgetName:this.widgetName}));
		
		this.metadata("style.width","235px");
	}
	,_getDelegatePrototype:function(){
		return dijit.MenuItem.prototype;
	}
//	 ,constructor: function(){
//	 }
	
	,init:function(){
//		if(this._menuItemStarted){return;}
//		this._menuItemStarted = true;
		
		aspect.after(this.label,"onChange",lang.hitch(this,function(newValue){										
			topic.publish("agile.widget.changed",this.category,"label",newValue);					
			this.metadata("parameters.label",newValue);
		}),true);
					
		aspect.after(this.accelKey,"onChange",lang.hitch(this,function(newValue){										
			topic.publish("agile.widget.changed",this.category,"accelKey",newValue);					
			this.metadata("parameters.accelKey",newValue);
		}),true);
		
//			//console.log("isSubMenu@@",this.metadata("isSubMenu"));
		if(this.metadata("parameters.isSubMenu")){				
			style.set(this.arrowWrapper,{visibility:"visible"});			
		}
		
		on(this.domNode,mouse.enter,lang.hitch(this,function(evt){								
			this.parent.showControlButtons(this,evt);
			if(this._subMenu && this._subMenu.hasChildren()){
				if(this.arrowWrapper){
					style.set(this.arrowWrapper,{visibility:"visible"});					
				}
				this.showSubMenu(true);
			}
		}));
	}
	,getPreferredSize:function(){
//			return {w:235,h:25};
		return {w:this.parent.dimension.width,h:25};
	}

	,getPopupMenuPositon:function(){
		return "right";
	}
	,getToolbarAnchorNode:function(){
		return this.domNode;
	}
[/@]
